<!--
import component from '*.vue';
 * @Author: your name
 * @Date: 2020-10-09 16:34:28
 * @LastEditTime: 2020-12-18 15:49:43
 * @LastEditors: lxc
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\views\Home\index.vue
-->
<template>
    <a-layout>
        <a-layout-header>Header</a-layout-header>
        <a-layout>
            <a-layout-sider>
                <Menu></Menu>
            </a-layout-sider>
            <a-layout-content>
                <router-view :key="key" />
            </a-layout-content>
        </a-layout>
        <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
</template>
<script>
import { reactive, toRefs, watch, computed, ref, onMounted, watchEffect } from 'vue';
import Menu from './menu.vue'
import { useRoute } from 'vue-router';
export default {
    components: {
        Menu
    },
    setup() {
        const route = useRoute();
        const state = reactive({
            key: computed(() => {
                return route.fullPath;
            })
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>

